<template>

  <el-form
    ref="addActivityData"
    :rules="rules"
    :model="addActivityData"
    class="addTictStyle"
    label-position="top"
  >
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <h3 class="ticTitle">基本信息：</h3>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="活动名称 :" prop="activactivityName">
          <el-input v-model="addActivityData.activactivityName" placeholder="请输入票务名称" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="活动起始时间 :" prop="startTime">
          <el-date-picker
            v-model="addActivityData.startTime"
            type="date"
            placeholder="选择日期"
            style="width:100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="活动终止时间 :" prop="endTime">
          <el-date-picker
            v-model="addActivityData.endTime"
            type="date"
            placeholder="选择日期"
            style="width:100%"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="活动头图 :" prop="code">
          <el-upload
            ref="detailUpload"
            action="''"
            list-type="picture-card"
            :file-list="detailShowImgs"
            :auto-upload="false"
            :http-request="uploadFileDeatail"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="活动背景 :" prop="yardactivactivityName">
          <el-upload
            ref="upload"
            action="''"
            list-type="picture-card"
            :file-list="showImgs"
            :auto-upload="false"
            :http-request="uploadFile"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="描述 :" prop="activityDescrption">
          <el-input v-model="addActivityData.activityDescrption" type="textarea" placeholder="选择场地后自动填充" />
        </el-form-item>
      </el-col>
    </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
        <h4 class="ticTitle">更多设置: </h4>
      </el-col>
      </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item label="关联优惠券 :" prop="activityRelevance">
          <el-select v-model="addActivityData.activityRelevance" filterable placeholder="请票据状态" style="width:100%">
            <el-option
              v-for="item in couponData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              {{ item.name }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
    <el-form-item label="投放渠道">
      <el-checkbox-group
        v-model="addActivityData.investChannal"
      >
        <el-checkbox v-for="invest in investChannalOption" :label="invest.code" :key="invest.code">{{invest.name}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
      </el-col>
    </el-row>
      <el-row :gutter="24">
        <el-col :span="16" :offset="4">
        <el-form-item label="用户分享 :" prop="userShare">
          <el-switch
            v-model="addActivityData.activityUserShare"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="100"
            inactive-value="0"
            @change="checkRecedeTick"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item v-if="this.addActivityData.activityUserShare==100" label="分享标题 :" prop="activityShareTitle">
          <el-input v-model="addActivityData.activityShareTitle" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item v-if="this.addActivityData.activityUserShare==100" label="分享图片 :" prop="shareImg">
          <el-upload
            ref="carouseUpload"
            action="''"
            list-type="picture-card"
            :file-list="carouselShowImgs"
            :auto-upload="false"
            :http-request="uploadFileCarouse"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :span="16" :offset="4">
        <el-form-item v-if="this.addActivityData.activityUserShare==100" label="分享文案 :" prop="activityShareOffical">
          <el-input v-model="addActivityData.activityShareOffical" type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-footer height="80px">
      <el-row style="display: flex;justify-content: center;align-items: center;">
        <el-button @click="submit" type="primary">
          保存
        </el-button>
        <el-button @click="editOut">
          取消
        </el-button>
      </el-row>
    </el-footer>
  </el-form>
</template>

<script>
import { replaceSpacesObj } from '../../../utils/webUtils.js'
import {} from '../../../styles/addTict.scss'

export default {
  activactivityName: 'AddTict',
  components: {},
  data() {
    return {
      couponData:[],
      addActivityData: {
        id:'',
        activactivityName: '',
        startTime: '',
        endTime: '',
        activityDescrption: '',
        activityUserShare: '',
        activityShareTitle: '',
        activityShareOffical: '',
        investChannal:[],
        activityHeadImgStr:'',
        activityRelevance: '',
        activityImgStr: '',
        activityShareImgStr: ''
      },
      validOptions: {},
      yardOptions: [],
      mercList: [],
      merchants: { activactivityName: '', uuid: '' },
      tickValue: [],
      validationOptions: [],
      rules: {},
      info: '',
      infoShow: false,
      imgList: [],
      imgformData: {},
      editBoxShow: false,
      addShow: false,
      displayDate: false,
      uuid: '',
      showImgs: [],
      list: [],
      detailShowImgs: [],
      detailList: [],
      carouselShowImgs: [],
      carouseList: [],
      investChannalOption:[],
      checkAll: false,
      isIndeterminate: true
    }
  },
  mounted() {
    this.queryCouponData()
    this.queryTeamCus()
  },
  methods: {
    // 查询所有优惠券
      queryCouponData() {
      this.axios.request({
        method: 'get',
        url: './coupon/coupon/template/listTemplate',
      }).then(response => {
        this.couponData = response.data.data
      }).catch(error => {
        console.log(error)
      })

    },
    // 用户分享
    checkRecedeTick() {
      if (this.addActivityData.activityUserShare == '0') {
        this.addActivityData.activityShareTitle = ''
        this.addActivityData.activityShareImgStr = ''
        this.addActivityData.activityShareOffical = ''
        this.$refs.carouseUpload.clearFiles();
      }
    },
    imgState(msg) {
      this.editBoxShow = msg
      this.editShow = msg
      this.addShow = msg
    },

    addTict() {
      this.editBoxShow = true
      this.addShow = true
      this.editShow = false
    },
    submit() {
      this.$refs['addActivityData'].validate((valid) => {
        if (!valid) {
          return
        }
        this.addActivityData = replaceSpacesObj(this.addActivityData)
        this.axios.request({
          method: 'post',
          url: './tck/activity/addActivity',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: {
            activityName: this.addActivityData.activactivityName,
            startTime: this.addActivityData.startTime,
            endTime: this.addActivityData.endTime,
            activityImgStr: this.addActivityData.activityImgStr,
            activityShareImgStr: this.addActivityData.activityShareImgStr,
            activityDescrption: this.addActivityData.activityDescrption,
            activityUserShare: this.addActivityData.activityUserShare,
            activityShareTitle: this.addActivityData.activityShareTitle,
            activityShareOffical: this.addActivityData.activityShareOffical,
            activityRelevance: this.addActivityData.activityRelevance,
            activityHeadImgStr:this.addActivityData.activityHeadImgStr,
            investChannal:JSON.stringify(this.addActivityData.investChannal)
          }
        }).then(response => {
          this.addActivityData.id = response.data.data.id
          this.dataSucess("新增数据成功");
          this.imgSubmit();
          this.editOut()
        }).catch(error => {
          console.log(error)
          this.dataFail("新增数据失败");
          this.infoShow = true
        })
      })
    },
    queryTeamCus() {
      this.axios
        .request({
          method: 'get',
          url: './kwp/kdi/para/code/TCK_GRANT_CANNAL',
          params: {}
        })
        .then(response => {
          this.investChannalOption = response.data.subParas
        })
        .catch(error => {
          console.log(error)
        })
    },
    dataSucess(message) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success'
      });
    },
    dataFail(message) {
      this.$notify({
        title: '失败',
        message: message,
        type: 'error'
      });
    },
    cleanActivity() {
      this.addActivityData = {
        activityactivactivityName: '',
        startTime: '',
        endTime: '',
        activityImgStr: '',
        activityactivityDescrption: '',
        activityUserShare: '',
        activityactivityShareTitle: '',
        activityShareOffical: '',
        activityactivityRelevance: '',
        activityHeadImgStr:'',
      }
    },
    imgSubmit(){
      if(this.showImgs.length>0){
        this.showImgs.forEach(res=>{
          this.list.push({'fileactivactivityName':res.activactivityName,'url':res.url.substr(res.url.lastIndexOf('tict'))})
        })
        this.addActivityData.imgStr = JSON.stringify(this.list)
      }else if (this.detailShowImgs.length>0){
        this.detailShowImgs.forEach(res=>{
          this.detailList.push({'fileactivactivityName':res.activactivityName,'url':res.url.substr(res.url.lastIndexOf('tict'))})
        })
        this.addActivityData.activityHeadImgStr=JSON.stringify(this.detailList)
      }else if(this.carouselShowImgs.length>0) {
        this.carouselShowImgs.forEach(res => {
          this.carouseList.push({'fileactivactivityName': res.activactivityName, 'url': res.url.substr(res.url.lastIndexOf('tict'))})
        })
        this.addActivityData.activityHeadImgStr = JSON.stringify(this.carouseList)
      } else{
        this.addActivityData.activityImgStr = ''
        this.addActivityData.activityHeadImgStr=''
        this.addActivityData.activityShareImgStr=''
      }

      this.$refs.detailUpload.submit()
      this.$refs.upload.submit()
      if(this.addActivityData.activityUserShare!='0'&&this.addActivityData.activityUserShare!=null) {
        this.$refs.carouseUpload.submit()
      }
    },
//图片上传
    uploadImg(){
      this.axios.request({
        method: "put",
        url: "tck/activity/updateActivity",
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        data: replaceSpacesObj(this.addActivityData)
      }).then(() => {
      }).catch(error => {
        console.log(error);
        this.info = '上传图片后回写imgStr数据失败！';
        this.infoShow = true;
        this.dataFail("上传活动背景图片回写数据失败")
      });
    },
    uploadFileCarouse(item){
      if(item.file!=null&&item.file!=''){
      let formData = new FormData();
      formData.append('upFile', item.file);
      this.axios.post(
        "./tck/activity/upload/img/"+this.addActivityData.id,formData
      ).then(res=>{
        var data=res.data.data;
        this.carouseList.push({'fileactivactivityName':data.fileactivactivityName,'url':data.url})
        this.addActivityData.activityShareImgStr = JSON.stringify(this.carouseList)
        if(this.addActivityData.activityShareImgStr.length>0){
          this.uploadImg();
        }
      }).catch(error => {
        console.log(error);
        this.dataFail("上传分享图片失败")
      });
      }else{
        this.addActivityData.activityShareImgStr = ''
      }
    },
    uploadFile(item){
      let formData = new FormData();
      if(item.file!=''&item.file!=null){
      formData.append('upFile', item.file);
      this.axios.post(
        "./tck/activity/upload/img/"+this.addActivityData.id,formData
      ).then(res=>{
        var data=res.data.data;
        this.list.push({'fileactivactivityName':data.fileactivactivityName,'url':data.url})
        this.addActivityData.activityImgStr = JSON.stringify(this.list)
        if(this.addActivityData.activityImgStr.length>0){
          this.uploadImg();
        }
      }).catch(error => {
        this.dataFail("上传活动背景失败")
      });
      }else{
        this.addActivityData.activityImgStr=''
      }
    },
    uploadFileDeatail(item){
      if(item.file!=null&&item.file!=''){
      let formData = new FormData();
      formData.append('upFile', item.file);
      this.axios.post(
        "./tck/activity/upload/img/"+this.addActivityData.id,formData
      ).then(res=>{
        var data=res.data.data;
        this.detailList.push({'fileactivactivityName':data.fileactivactivityName,'url':data.url})
        this.addActivityData.activityHeadImgStr = JSON.stringify(this.detailList)
        if(this.addActivityData.activityHeadImgStr.length>0){
          this.uploadImg();
        }

      }).catch(error => {
        console.log(error);
        this.dataFail("上传活动头图失败")
      });
      }else{
        this.addActivityData.activityHeadImgStr = ''
      }
    },
    editOut() {
     this.$router.push("/ticActivity")
    }
  }
}
</script>

<style scoped>
  .edit {
    width: 100%;
    height: 100%;
    z-index: 100;
  }


</style>
